<script lang="ts" setup>
/**
 * 节点通用属性栏
 */
import { defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
import { Cell } from '@antv/x6'
import { ObjectUtil } from '@utils/object-util'

const props = defineProps<{
  cell: Cell
}>()

const _cell = ref<any>()
onMounted(function () {
  init()
})
watch(() => props.cell, () => {
  init()
})
function init () {
  _cell.value = { attrs: ObjectUtil.copy(props.cell.attrs) }
  mapOptions.value = props.cell.data.mapOptions
}

onBeforeUnmount(function () {
  // --
})
// region TODO 地图主题
const mapOptions = ref()
const mapStyleList = shallowRef([
  { name: '标准', value: 'normal' },
  { name: '幻影黑', value: 'dark' },
  { name: '月光银', value: 'light' },
  { name: '远山黛', value: 'whitesmoke' },
  { name: '草色青', value: 'fresh' },
  { name: '雅士灰', value: 'grey' },
  { name: '涂鸦', value: 'graffiti' },
  { name: '马卡龙', value: 'macaron' },
  { name: '靛青蓝', value: 'blue' },
  { name: '极夜蓝', value: 'darkblue' },
  { name: '酱籽', value: 'wine' }
])
function mapStyleChangeHandle () {
  props.cell.data.expose.updateMapStyle()
}
// endregion

// 设置属性
function attrsHandle (key: string, val?: string, defaultValue?: string) {
  props.cell.attr(key, val || defaultValue)
}
</script>

<template>
  <div v-if="_cell" class="attr-grid" style="grid-template-columns: repeat(2, 1fr);">
    <el-form-item label="边框颜色">
      <el-color-picker
        v-model="_cell.attrs.body.style.borderColor" show-alpha
        @change="attrsHandle('body/style/borderColor', $event, 'rgba(0,0,0,0)')"
      />
    </el-form-item>
    <el-form-item label="边框宽度">
      <el-input-number v-model="_cell.attrs.body.style.borderWidth" :min="0" @change="attrsHandle('body/style/borderWidth', $event, '0')" />
    </el-form-item>
    <el-form-item label="地图主题">
      <el-select v-model="mapOptions.style" @change="mapStyleChangeHandle">
        <el-option v-for="item in mapStyleList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
</style>
